<template>
  <div id="pc_home_products">
    <div class="productItem" v-for="item in productList" :key="item.id" @click="buyProduct(item)">
      <div class="productImages">
        <div class="productImage">
          <img :src="show_url + item.images[0]" />
          <img
            class="nullStock"
            v-if="item.goods_stock === 0"
            src="@/assets/images/mobile_black/home/soldout.png"
          />
          <div v-else-if="item.isOverTime" class="overTimeMask">已结束</div>
        </div>
        <div class="sellDay" v-if="item.sale_type === 3">
          时间待定
        </div>
        <div
          class="sellDay"
          v-else-if="item.is_buy === 0 && !item.isOverTime && item.countTimeStatus == 1"
        >
          {{ item.sellTime }}
        </div>
      </div>

      <div class="productDesc">
        <img class="desc_background" src="@/assets/images/pc_black/home/list_background.png" />

        <div class="productTitle">
          {{ item.goods_name }}
        </div>

        <div class="productCenter">
          <img :src="show_url + item.icon" />
          <span>{{ item.authorize }}</span>
        </div>

        <div class="buy">
          <button
            v-if="item.goods_stock !== 0 && !item.isOverTime"
            class="buyButton btn_color"
            :disabled="item.goods_stock === 0 || item.isOverTime"
            @click.stop="buyProduct(item)"
          >
            {{ changeBuy(item) }}
          </button>
          <button
            v-else
            class="buyButton btn_grey"
            :disabled="item.goods_stock === 0 || item.isOverTime"
            @click.stop="buyProduct(item)"
          >
            {{ changeBuy(item) }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PcHomeProducts",
  props: {
    productList: {
      type: Array
    },
    show_url: {
      type: String
    }
  },
  methods: {
    // ------ common ------
    buyProduct(item) {
      this.$emit("buyProduct", item);
    },
    changeBuy(val) {
      // 售罄(没库存)
      if (val.goods_stock <= 0) {
        return "已售罄";
      } else {
        // 有库存
        if (val.isOverTime) {
          return "已结束";
        } else {
          // 正常或者预售(没有超时)
          return "立即查看";
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
#pc_home_products {
  display: flex;
  // justify-content: space-between;
  width: 100%;

  .productItem {
    width: 276px;
    margin-right: 32px;

    .productImages {
      position: relative;

      .productImage {
        height: 276px;
        display: flex;
        align-items: center;
        background-color: #000000;

        img {
          width: 276px;
          max-height: 276px;
          height: auto;
          cursor: pointer;
        }
      }

      .nullStock {
        position: absolute;
        left: 0;
        top: 0;
        background: #000000;
        opacity: 0.6;
      }
      .overTimeMask {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000000;
        opacity: 0.6;
        font-size: 36px;
        font-weight: 700;
        color: #999999;
        font-family: "Lantinghei SC";
      }

      .cownTime {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        align-items: center;

        .timeBox {
          width: 33px;
          height: 33px;
          background: #ffffff;
          border-radius: 5px;
          display: block;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          text-align: center;
        }

        .colon {
          margin: 0 5px;
        }
      }

      .sellDay {
        background: url("../../assets/images/pc_black/home/sell.png");
        background-size: 100% 100%;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 6px 19px 6px 10px;
        min-width: 154px;
      }
    }

    .productDesc {
      position: relative;
      overflow: hidden;
      background: #2b2c2d;
      padding: 0 15px;
      z-index: 0;

      .productTitle {
        display: flex;
        width: 100%;
        height: 52px;
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 26px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        word-break: break-all;
        margin-top: 20px;
        z-index: 2;
      }

      .productCenter {
        display: flex;
        align-items: center;
        margin-top: 15px;
        z-index: 2;

        img {
          width: 23px;
          height: 23px;
        }

        span {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 12px;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
          margin-left: 10px;
        }
      }

      .buy {
        margin-top: 20px;
        margin-bottom: 25px;
        z-index: 2;

        button {
          width: 100%;
          height: 36px;
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #1e2020;
          line-height: 14px;
          border: none;
          background: none;
          background-size: 100% 100%;
          background-position: center center;
          cursor: pointer;
        }

        .btn_color {
          background-image: url("../../assets/images/pc_black/home/btn_color.png");
        }

        .btn_grey {
          background-image: url("../../assets/images/pc_black/home/btn_grey.png");
        }
      }

      .desc_background {
        position: absolute;
        top: 0;
        right: 0;
        width: 126px;
        height: 191px;
        z-index: -1;
      }
    }
  }

  .productItem:last-child {
    margin-right: 0;
  }
}
</style>
